<template>
	<div class='cart container'>
        <header>
            <i class='iconfont icon-fanhui' @click="$router.back()"></i>
            <span>购物车</span>
            <span></span>
        </header>
        <section>
            <div class='cart-title'>
                <van-checkbox></van-checkbox>
                <span>商品</span>
            </div>
            <ul>
                <li>
                    <div class='check'>
                        <van-checkbox></van-checkbox>
                    </div>
                    <h2>
                        <img src="" alt="">
                    </h2>
                    <div class='goods'>
                        <div class='goods-title'>
                            <span></span>
                            <i class='iconfont icon-lajitong'></i>
                        </div>
                        <div class='goods-price'>¥价格</div>
                        <van-stepper>
                    </div>
                </li>
            </ul>
        </section>
        <section>
            没有购物车数据
            <router-link to='/home'>去首页逛逛吧</router-link>
        </section>
        <footer >
            <div class='radio'>
                <van-checkbox ></van-checkbox>
            </div>
            <div class='total' >
                <div>
                    共有
                    <span class='total-active'>数量</span>
                    件商品
                </div>
                <div>
                    <span>总计：</span>
                    <span class='total-active'>¥123 + 0茶币</span>
                </div>
            </div>
            <div class='order' >删除</div>
            <div class='order' >去结算</div>
        </footer>
	</div>
</template>

<script>
// import { Toast } from 'mint-ui';
// import http from '@/common/api/request.js'
// import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    name: "Cart",
    data () {
        return {
            isNavStatus:false,
            checked:true
        }
    },
};
</script>
<style scoped lang="scss">
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.173333rem;
    color:#fff;
    background-color: #b0352f;
    i{
        padding:0 0.4rem;
        font-size:0.586666rem;
    }
    span{
        padding:0 0.4rem;
        font-size:0.426666rem;
    }
}
section{
    background-color: #f5f5f5;
    .cart-title{
        display: flex;
        padding:0.533333rem;
        span{
            padding:0 0.4rem;
            font-weight: 500;
            font-size:0.48rem;
        }
    }
    ul{
        display: flex;
        flex-direction: column;
        li{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:0.16rem 0.533333rem;
            margin:0.213333rem 0;
            background-color: #fff;
            .check{
                padding-right:0.373333rem;
            }
            .goods{
                display: flex;
                flex-direction: column;
                padding-left: .4rem;
                font-size:0.32rem;
                .goods-title{
                    display: flex;
                    i{
                        font-size:0.586666rem;
                    }
                }
                .goods-price{
                    padding:0.08rem 0;
                    color:#b0352f;
                }
                ::v-deep .van-stepper{
                    text-align: right;
                }
            }
            img{
                width: 1.973333rem;
                height: 1.973333rem;
            }
        }
    }
}
footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.28rem;
    border-top:0.053333rem solid #ccc;
    .radio{
        padding:0 0.4rem;
    }
    .total{
        flex:1;
        font-size:0.32rem;
        .total-active{
            color:#b0352f;
        }
    }
    .order{
        width: 3.2rem;
        line-height: 1.28rem;
        color:#fff;
        text-align: center;
        font-size: 0.426666rem;
        background-color: #b0352f;
    }
}
</style>